<template>
  <div style="height: 100%">
    <el-tabs type="border-card" style="height: 99%">
      <el-tab-pane label="CustomTable"><CustomTable /></el-tab-pane>
      <el-tab-pane label="vTable" style="height: 100%">
        <vTable></vTable>
      </el-tab-pane>

      <el-tab-pane label="RecycleScroller"
        ><RecycleScroller></RecycleScroller
      ></el-tab-pane>
      <el-tab-pane label="V2" >
        <V2 :data="bigData" :estimated-height="80">
           <template v-slot:default="{ item }">
                <div
                    class="custom-item"
                    :style="{ height: item.height + 'px' }"
                >
                    {{ item.content }}
                </div>
            </template>
        </V2>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import vTable from "./vTable.vue";
import CustomTable from "./customTable.vue";
import RecycleScroller from "./RecycleScroller.vue";
import V2 from "./v2.vue";
const bigData = Array.from({ length: 5000 }, (_, i) => ({
  content: `Item - ${i}`,
  height: 100 + Math.random() * 100,
}));
</script>

<style lang="scss" scoped>
::v-deep(.el-tabs .el-tabs__content) {
  height: calc(100% - 100px);
}
</style>